<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>福建闽菜</title>
  <link rel="stylesheet" href="./assets/css/common.css">
  <style>
    .list {
      width: 1080px;
      margin: 20px auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .list li {
      width: 340px;
      height: 340px;
      background-color: #fff;
      margin-bottom: 30px;
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
    }

    .list li img {
      transition: all 0.3s linear;
    }

    .list li:hover img {
      transform: scale(1.2);
    }

    .list li .info {
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      font-size: 14px;
      font-family: "微软雅黑";
      padding: 10px;
      box-sizing: border-box;
    }

    .list li .info h3 {
      text-align: center;
      margin-bottom: 5px;
    }

    .list li .info p {
      text-align: justify;
      text-indent: 2em;
      line-height: 20px;
    }

    .footer {
      margin-top: 0;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="content">
      <div class="logo">
        <img src="./assets/img/logo.png" alt="logo">
      </div>
      <div class="home"><a href="index.html">网站首页</a></div>
      <ul class="menu">
        <li><a href="shandong.html">山东鲁菜</a></li>
        <li><a href="guangdong.html">广东粤菜</a></li>
        <li><a href="fujian.html">福建闽菜</a></li>
        <li><a href="hunan.html">湖南湘菜</a></li>
        <li><a href="profile.html">个人简介</a></li>
      </ul>
    </div>

  </div>

  <ul class="list">
    <li>
      <img src="./assets/img/mincai_1.png" />
      <div class="info">
        <h3>佛跳墙</h3>
        <p>
          佛跳墙，又名满坛香、福寿全，是福建福州的当地名菜，属闽菜系福州菜，是闽菜的五大代表菜之一，也是中国著名的菜品，多次做为国宴的主菜，接待国内外贵宾。
        </p>
      </div>
    </li>
    <li>
      <img src="./assets/img/mincai_2.png" />
      <div class="info">
        <h3>鸡汤氽海蚌</h3>
        <p>
          鸡汤汆海蚌是福州一道经典特色名菜，属于闽菜系福州菜，也是闽菜最具代表性的汤菜。鸡汤氽海蚌是与“佛跳墙”齐名，是闽菜珍品，是人民大会堂国宴上的名菜，郁达夫形容它是“色香味形俱佳的神品”，为福州“闽菜”五大代表菜之一。
        </p>
      </div>
    </li>
    <li>
      <img src="./assets/img/mincai_3.png" />
      <div class="info">
        <h3>白斩河田鸡</h3>
        <p>
          长汀河田鸡有香酥鸡、油淋鸡、白露鸡、八宝全鸡、盐酒鸡。其中以姜汁白斩河田鸡最为著名，被列为闽西客家菜谱之首，是汀州最负盛名的名菜，被誉为“汀州第一大菜”，也是福建闽菜之闽西菜经典代表菜，也是福建客家名菜，属于闽西风味之汀州客家菜系。
        </p>
      </div>
    </li>
    <li>
      <img src="./assets/img/mincai_4.png" />
      <div class="info">
        <h3>海蛎煎</h3>
        <p>
          海蛎煎，又称蚵仔煎，起源于福建泉州，是福建闽南沿海、台湾等地的经典名菜，也是一道常见的家常菜，属于闽菜之闽南菜。
        </p>
      </div>
    </li>
    <li>
      <img src="./assets/img/mincai_5.png" />
      <div class="info">
        <h3>武夷熏鹅</h3>
        <p>
          武夷山岚谷熏鹅，俗称武夷熏鹅，是武夷山一道桌面酒席必上的传统名肴，此菜产自福建武夷山地区，属于福建闽菜之闽北菜代表菜。
        </p>
      </div>
    </li>
    <li>
      <img src="./assets/img/mincai_6.png" />
      <div class="info">
        <h3>客家生鱼片</h3>
        <p>
          客家生鱼片，又名客家鱼生，或客家脍鱼生，中国人吃鱼生的历史至少可以追溯到秦汉时期，只不过那时还没有“鱼生”的说法，称为脍，脍就是将鱼肉细切成片后再进食的一种方法。客家生鱼片尤以宁化鱼生最为著名，宁化生鱼脍是福建一道色香味俱全的地方名肴，属于闽菜系闽西菜，属于闽西北风味。
        </p>
      </div>
    </li>
  </ul>

  <div class="footer"></div>
</body>

</html>